﻿<label id="pageSize">Items per page:</label><input class="span1" data-bind="value: pageSize" />
<div id="paging" class="pagination-centered">
    <ul class="pager">
        <li>
            <a id="first" title="First Page" href="#" data-bind="click: function() { $root.education.firstPage(); }">|←</a>
        </li>
        <li>
            <a id="prev" title="Previous Page" href="#" data-bind="click: function () { $root.education.previousPage(); }">←</a>
        </li>
        <!-- ko foreach: ko.utils.range(0, $root.education.pagesCount()-1) -->
        <li>
            <a href="#" data-bind="text: ($data + 1), click: function() { $root.education.currentPage($data) }, css: { on: $data == $root.education.currentPage() }">
            </a>
        </li>
        <!-- /ko -->
        <li>
            <a id="next" title="Next Page" href="#" data-bind="click: function() { $root.education.nextPage(); }"> →</a>
        </li>
        <li>
            <a  id="last" title="Last Page" href="#" data-bind="click: function() { $root.education.lastPage(); }"> →|</a>
        </li>
    </ul>
</div>
